<!--
 * @Author: 胡海
 * @Date: 2019-11-20 21:52:35
 * @LastEditors: 胡海
 * @LastEditTime: 2020-03-07 22:29:52
 * @Description: 
 -->
<template>
  <div class="menu">
    <div class="tree-wapper">
      <el-tree
        :data="treeData"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
        :check-strictly="true"
        :default-checked-keys="rolesList"
      ></el-tree>
    </div>
    <div class="hh-box-center">
      <el-button size="mini" @click="close">取 消</el-button>
      <el-button size="mini" type="primary" @click="submite">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { constantRouterMap } from "@/router";
import { mapGetters } from "vuex";
import { axiosRolesMenu, axiosRolesBtn } from "@/api/user";
export default {
  props: {
    AEform: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      rolesBtnList: []
    };
  },
  computed: {
    ...mapGetters(["roles"]),
    rolesList() {
      return this.roles.concat(this.rolesBtnList);
    },
    treeData() {
      // 从路由里面计算菜单项
      let asynRoutes = constantRouterMap.filter(
        (route, index) => route.children
      );
      let odd = asynRoutes.filter(
        (route, index) => route.children.length === 1
      );
      let plural = asynRoutes.filter(
        (route, index) => route.children.length > 1
      );
      let arr0 = plural.map(item => {
        return {
          id: item.path,
          label: item.meta.title,
          children: item.children.map(op => {
            return {
              id: op.path,
              label: op.meta.title,
              children: op.roles.map(ro => {
                return {
                  id: ro.name,
                  label: ro.title
                };
              })
            };
          })
        };
      });
      let arr1 = odd.map(item => {
        return {
          id: item.path,
          label: item.meta.title
        };
      });
      return arr0.concat(arr1);
    }
  },
  components: {},
  created() {
    this.getBtnList();
  },
  mounted() {},
  watch: {},
  methods: {
    getBtnList() {
      axiosRolesBtn({
        rolesType: this.AEform.rolesType
      }).then(res => {
        this.rolesBtnList = res.data.map(item => item.btnName);
      });
    },
    close() {
      this.$emit("close");
    },
    submite() {
      this.getCheckedKeys();
      this.$emit("submite", null);
    },
    getCheckedKeys() {
      // 修改菜单项
      let obj = {
        menu: JSON.stringify(this.$refs.tree.getCheckedKeys()),
        rolesType: this.AEform.rolesType
      };
      axiosRolesMenu(obj);
    }
  }
};
</script>

<style lang="scss">
.tree-wapper {
  .el-tree-node.is-expanded > .el-tree-node__children {
    display: flex;
    flex-wrap: wrap;
    background: #f5f5f6;
  }
}
</style>
